<template>
  <view class="p-page p-feature-page">
	   <view class="" v-if="render('feature-hose')">
	   	    <view class="title"> 大门朝向 </view>
	   	    <view class="tags"> 
	   	          <u-tag   
	   	    	  :text="item.text"
	   	    	  closeable  size="mini" shape="circle" bg-color="#FFF" 
	   	    	  :color="item.choose?'#FBD100':'#CCC'"
	   	    	  :border-color="item.choose?'#FBD100':'#CCC'"
	   	    	   v-for="(item,i) in tmp.rentalTypes"  :key="'rentalTypes'+i"
	   	    	   @click="click('rentalType',i)"
	   	    	   @close="close('rentalType',i)">   </u-tag>
	   	    </view>
			<view class="divider" style="margin: 20px 0;"/>
	   </view>
	  <view class="" v-if="render('feature-dipi') || render('feature-hose')">
		
		<view class="flex" style="margin: 10px 0;">
  	        <InputArea placeholder="门前路宽" tail="米" :val="tmp.coveredArea"  target="ztSpace" wename="coveredArea"/>
  	        <InputArea placeholder="房后路宽" tail="米" :val="tmp.insideArea"   target="ztSpace" wename="insideArea"/>
  	     </view> 
		 
		 <view class="flex" style="margin: 10px 0;">
		     <InputArea placeholder="房左路宽" tail="米"   :val="tmp.interlayerHeight"  decimal="0"  target="ztSpace"   wename="interlayerHeight"/>
		     <InputArea placeholder="房右路宽" tail="米"  :val="tmp.interlayer"  decimal="0"  target="ztSpace"    wename="interlayer"/>
		 </view> 
		 <view class="divider" style="margin: 20px 0;"/>
	  </view>
	  <view class="" v-if="render('feature-gaocen')">
	  	      <view class="title"> 阳台朝向 </view>
			  <view class="title"> 房源景观 </view>
	  </view>
	  <view class="" v-if="render('feature-hose')|| render('feature-gaocen') || render('feature-shop')">
	  	    建造年份 上次装修年份
			  <view class="title"> 装修情况 </view>
			 <view class="divider" style="margin: 20px 0;"/>
	  </view>
	  
	 
	  <view class="" v-if="render('feature-office')">
	  	    
	  	    <view class="title"> 租住类型 </view> 
	  	    <view class="tags"> 
	  	          <u-tag   
	  	    	  :text="item.text"
	  	    	  closeable  size="mini" shape="circle" bg-color="#FFF" 
	  	    	  :color="item.choose?'#FBD100':'#CCC'"
	  	    	  :border-color="item.choose?'#FBD100':'#CCC'"
	  	    	   v-for="(item,i) in tmp.rentalTypes"  :key="'rentalTypes'+i"
	  	    	   @click="click('rentalType',i)"
	  	    	   @close="close('rentalType',i)">   </u-tag>
	  	    </view>
	  	    <view class="title"> 物业配置 </view> 
	  	    <view class="tags"> 
	  	          <u-tag  :text="item.text" 
	  	    	  closeable  size="mini" shape="circle" bg-color="#FFF" 
	  	    	  :color="item.choose?'#FBD100':'#CCC'"
	  	    	  :border-color="item.choose?'#FBD100':'#CCC'"
	  	    	  v-for="(item,i) in tmp.propertyConfigurations"  
	  	    	  :key="'propertyConfigurations'+i"
	  	    	   @click="click('propertyConfiguration',i)"
	  	    	   @close="close('propertyConfiguration',i)" ></u-tag>
	  	    </view>
	  </view> 
	  
	  
	
	<!-- 都有的显示 -->
    <view class="title"> 特色标签 </view> 
    <view class="tags"> 
          <u-tag :text="item.text" 
		   closeable  size="mini" shape="circle" bg-color="#FFF" 
		  :color="item.choose?'#FBD100':'#CCC'"
		  :border-color="item.choose?'#FBD100':'#CCC'"
		   v-for="(item,i) in tmp.specialLabels" 
		   :key="'specialLabels'+i" 
		   @click="click('specialLabels',i)"
		   @close="close('specialLabels',i)" > </u-tag>
    </view>
     
  </view>
</template>
<script>  
export default { 
 data() {
    return {
      tmp:{}, 
    }
  },
  mounted(){ 
      var { slogan , describe} = this.$store.state.publishInfo
      var tmp = {
        rentalType:"房间大,透风,*花园,*房东好,房间大,透风,*花园,*房东好"
      }
      if(tmp.rentalType){ tmp.rentalTypes = tmp.rentalType.split(",").map(e=>{ return { choose:e.startsWith("*"), text:e.replace("*",'') } }) }
      console.log(this.tmp);
      this.tmp = tmp
  },
  methods:{
      close(key,index){
        var tmp = {...this.tmp};
        tmp[key+'s'].splice(index,1)
        this.tmp = tmp;
      },
      click(key,index){
        var tmp = {...this.tmp};
        tmp[key+'s'][index].choose = !tmp[key+'s'][index].choose
        this.tmp = tmp;
      },
      change(){
        this.$store.dispatch("asyncPublishInfo",{type:index});
      }
  }
}
 
</script>  
<style lang="scss">
.p-feature-page{
	.u-tag{
		margin: 5px;
	}
}
</style>